<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.content{
			width: 1000px;
			height: 200px;
			background-color: pink;


		}
		.content div{
			width: 200px;
			height: 200px;
/*			float: left;*/
/*			左浮动*/
		}
		.content div:nth-of-type(1){
			background-color: red;
			float: left;
		}
		.content div:nth-of-type(2){
		background-color: blue;
		float: right;
		}
		.content div:nth-of-type(3){
			background-color: green;
			float: left;
		}
		.content sapn{
			width: 200px;
			height: 200px;
			background-color: skyblue;
			float: left;
		}
		.one{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
		}
		.two{
			width: 400px;
			height: 200px;
			background-color: blue;
		}
		/*.aaa{
			height: 200px;
		}*/
	</style>
</head>
<body>
	<!-- 使用了 浮动 脱标 -->
	<div class="aaa">
	<div class="one"></div>
	</div>
	<!-- 普通div 也就是标准文档流 -->
	<div class="two"></div>

	<!-- dsiplay:inline-block -->
	<!-- 缺点：有缝隙  -->

	<!-- 浮动是一种布局方式 通过属性 float 来实现 -->
	<!-- <div class="content">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<span>5</span> -->
		<!-- 注意 如果同级中有元素 使用了浮动 那么 他的兄弟也应该设置浮动 -->
	<!-- </div> -->
<!-- 	1.浮动的元素不能有效地撑开父级的高度
		解决：给父级设置 高度
			解决浮动带来的问题（伪元素清除法）
		2.浮动会导致 脱离标准文档流 别管你是什么标签 如果使用浮动他就会脱离原来的规则 也就是原来不能设置的也能设置了（脱离标准文档流的元素 有点像行内块 但是不是）
		简称：脱标
		3.解决浮动带来的问题（伪元素清除法）
		给父级设置 高度

		 -->

</body>
</html>